<template>
  <div class="gauge-chart">
    <div class="chart-title">{{ title }}</div>
    <div class="gauge-container">
      <div ref="gaugeChart" class="gauge-chart-content"></div>
      <div class="gauge-info">
        <div class="info-item" v-for="item in infoData" :key="item.label">
          <div class="info-label">{{ item.label }}</div>
          <div class="info-value" :style="{ color: item.color }">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'GaugeChart',
  props: {
    title: {
      type: String,
      default: '仪表盘'
    },
    value: {
      type: Number,
      default: 75
    },
    max: {
      type: Number,
      default: 100
    },
    unit: {
      type: String,
      default: '%'
    },
    color: {
      type: String,
      default: '#00d4ff'
    },
    infoData: {
      type: Array,
      default: () => [
        { label: '当前值', value: '75%', color: '#00d4ff' },
        { label: '目标值', value: '90%', color: '#00ff88' },
        { label: '历史最高', value: '95%', color: '#ff6b6b' },
        { label: '历史最低', value: '45%', color: '#ffd93d' }
      ]
    }
  },
  data() {
    return {
      chart: null,
      currentValue: 0
    }
  },
  mounted() {
    this.initChart()
    this.startAnimation()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    if (this.animationTimer) {
      clearInterval(this.animationTimer)
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.gaugeChart)
      this.updateChart()
    },
    updateChart() {
      const option = {
        backgroundColor: 'transparent',
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            radius: '80%',
            min: 0,
            max: this.max,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                width: 8,
                color: [
                  [0.3, '#ff6b6b'],
                  [0.7, '#ffd93d'],
                  [1, '#00d4ff']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: this.color
              }
            },
            axisTick: {
              distance: -8,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -15,
              length: 15,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              distance: -25,
              rotate: 'tangential',
              formatter: function (value) {
                if (value === 0) {
                  return '0'
                } else if (value === 25) {
                  return '25'
                } else if (value === 50) {
                  return '50'
                } else if (value === 75) {
                  return '75'
                } else if (value === 100) {
                  return '100'
                }
                return ''
              }
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}' + this.unit,
              color: this.color,
              fontSize: 20,
              fontWeight: 'bold',
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: this.currentValue,
                name: this.title
              }
            ]
          }
        ]
      }
      
      this.chart.setOption(option)
    },
    startAnimation() {
      // 初始动画
      this.animateToValue(this.value)
      
      // 定期更新数据
      this.animationTimer = setInterval(() => {
        const randomChange = (Math.random() - 0.5) * 20
        const newValue = Math.max(0, Math.min(this.max, this.value + randomChange))
        this.animateToValue(newValue)
      }, 4000)
    },
    animateToValue(targetValue) {
      const startValue = this.currentValue
      const duration = 2000
      const startTime = Date.now()
      
      const animate = () => {
        const elapsed = Date.now() - startTime
        const progress = Math.min(elapsed / duration, 1)
        
        // 使用缓动函数
        const easeOutCubic = 1 - Math.pow(1 - progress, 3)
        this.currentValue = startValue + (targetValue - startValue) * easeOutCubic
        
        this.updateChart()
        
        if (progress < 1) {
          requestAnimationFrame(animate)
        } else {
          this.currentValue = targetValue
        }
      }
      
      requestAnimationFrame(animate)
    }
  }
}
</script>

<style scoped>
.gauge-chart {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.chart-title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.gauge-container {
  flex: 1;
  display: flex;
  gap: 20px;
}

.gauge-chart-content {
  flex: 1;
  height: 100%;
  min-height: 250px;
}

.gauge-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 120px;
}

.info-item {
  text-align: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.info-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  margin-bottom: 5px;
}

.info-value {
  font-size: 16px;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .gauge-container {
    flex-direction: column;
  }
  
  .gauge-info {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: auto;
  }
  
  .info-item {
    flex: 1;
    min-width: 100px;
  }
}
</style>
